<template>
	<view>
		<lsj-upload
		ref="lsjUpload"
		childId="upload1"
		:width="width"
		:height="height"
		:option="option"
		:size="size"
		:formats="formats"
		:debug="debug"
		:instantly="instantly"
		@change="onChange"
		@progress="onprogress"
		@uploadEnd="onuploadEnd"
		>
		<slot></slot>
		</lsj-upload>
		<u-overlay :show="show" @click="show = false" class="u-flex u-row-center u-col-center">
			<view >
				<u-loading-icon size="70" :textSize="23" text="上传中" textColor="white" :vertical="true" color="white"></u-loading-icon>
			</view>
			
		</u-overlay>
	</view>
</template>

<script>
	export default {
		name:"shop-upload-file",
		data() {
			return {
				option: {
					// 上传服务器地址，此地址需要替换为你的接口地址
					url:this.$API_URL +  'app3/upload/uploadOneWithName',
					// 上传附件的key
					name: 'file',
					
					// 根据你接口需求自定义body参数
					formData: {
						// 'orderId': 1000
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width:"180rpx",
				height: '44rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: '',
				// 文件上传大小限制
				size: 10,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				show:false,
				debug: true,
			};
		},
		methods:{
			onprogress(e){
			 this.show=true;
			},
			onChange(e){
				// console.log(e);
			},
			onuploadEnd(e){
				let res=JSON.parse(e.responseText);
			console.log(this.size,'asd');
				let data=res.data;
				this.show=false;
				this.$emit('uploadEnd',data);
			}
		}
	}
</script>

<style>

</style>